<!-- 订单详情 -->
<template>
  <div class="dashboard-container edit-order">
    <div class="app-container">

      <el-card
        shadow="never"
        class="order-box"
      >
        <el-row
          :gutter="24"
          justify="center"
        >
          <el-col
            :span="6"
            class="order-info"
          >
            <div class="ddbh">
              订单编号:
              <label>{{ orderDetails.orderId }}</label>
            </div>
          </el-col>
          <el-col
            :span="6"
            class="Waybill-info"
          >
            <div class="ydbh">
              运单编号：
              <label>{{ orderDetails.transportOrderId || '**' }}</label>
            </div>
          </el-col>
          <el-col
            :span="6"
            class="ordertime"
          >
            <div class="xdsj">
              下单时间：
              <label>{{ orderDetails.createTime || '**' }}</label>
            </div>
          </el-col>
          <el-col
            :span="6"
            class="orderstatus"
          >
            <div class="ddzt">
              订单状态：
              <label v-if="orderDetails.status === '23000'">待取件</label>
              <label v-else-if="orderDetails.status == '23001'">已取件</label>
              <label v-else-if="orderDetails.status == '23003'">网点入库</label>
              <label v-else-if="orderDetails.status == '23005'">运输中</label>
              <label v-else-if="orderDetails.status == '23004'">待装车</label>
              <label v-else-if="orderDetails.status == '23006'">网点出库</label>
              <label v-else-if="orderDetails.status == '23007'">待派送</label>
              <label v-else-if="orderDetails.status == '23008'">派送中</label>
              <label v-else-if="orderDetails.status == '23009'">已签收</label>
              <label v-else-if="orderDetails.status == '23010'">拒收</label>
              <label v-else>已取消</label>
            </div>
          </el-col>
          <el-col :span="19">
            <div class="yjddrq">
              预计到达日期：
              <label>{{ orderDetails.estimatedArrivalTime || '**' }}</label>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!-- 基本信息 -->
      <el-collapse v-model="activeNames">
        <el-collapse-item
          title="基本信息"
          name="1"
        >
          <template>
            <div class="collapse-title"></div>
          </template>
          <div class="block">
            <el-timeline>
              <div class="line"></div>
              <div class="pake1 pake-info-detail">
                <img
                  class="img-info1"
                  src="../../assets/fahuo.png"
                  alt=""
                />
                <span>发货方</span>
              </div>
              <div class="Shipper">
                <div>
                  <div class="demo-input-suffix">
                    发货方姓名：
                    <span>{{ orderDetails.senderName }}</span>
                  </div>

                  <div class="demo-input-suffix">
                    发货方地址：
                    <span>{{ orderDetails.receiverProvince+
                      orderDetails.receiverCity+
                      orderDetails.receiverCounty
                    }}
                    </span>
                  </div>
                </div>
                <div class="suffixphone">
                  <div class="demo-input-suffix">
                    发货方电话：
                    <span>{{ orderDetails.senderPhone }}</span>
                  </div>
                  <div class="demo-input-suffix">
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ orderDetails.senderAddress }}</span>
                  </div>
                </div>
              </div>
              <div class="pake-infos pake-info-detail">
                <img
                  class="img-info2"
                  src="../../assets/shouhuo.png"
                  alt=""
                />
                <span class="pake-infos-text">收货方</span>
              </div>
              <div class="pake-infos-name">
                <div>
                  <div class="demo-input-suffix">
                    收货方姓名：

                    <span>{{ orderDetails.receiverName }}</span>
                  </div>
                  <div class="demo-input-suffix">
                    收货方地址：
                    <span>{{ orderDetails.senderProvince+
                      orderDetails.senderCity+
                      orderDetails.senderCounty
                    }}
                    </span>
                  </div>
                </div>
                <div class="pake-infos-phone">
                  <div class="demo-input-suffix">
                    收货方电话：
                    <span>{{ orderDetails.receiverPhone }}</span>
                  </div>
                  <div class="demo-input-suffix">
                    &nbsp;&nbsp;&nbsp;详细地址：
                    <span>{{ orderDetails.receiverAddress }}</span>
                  </div>
                </div>
                <!-- 原来地图位置 -->
              </div>
              <!-- 现在地图位置 -->
              <div class="pake-info-juli">
                <img
                  src="@/assets/juli.png"
                  alt=""
                  style="
                    width: 15px;
                    height: 18px;
                    vertical-align: middle;
                    margin-top: 2px;
                  "
                />
                <span class="pake-info-juli-text">距离：</span>
                <span
                  class="pake-info-juli-texts"
                >{{ orderDetails.distance }}km</span>
              </div>
              <!-- 备注 -->
              <div class="pake-info-remarks">
                <span class="pake-info-remarks-text">备注：</span>
                <span class="pake-info-remarks-texts">
                  <!-- 如果没有数据显示暂无 -->
                  {{ orderDetails.remarks ? orderDetails.remark : '暂无' }}
                </span>
              </div></el-timeline>
          </div>
        </el-collapse-item>
      </el-collapse>
      <!-- 订单跟踪 -->
      <el-collapse>
        <el-collapse-item
          title="订单跟踪"
          name="2"
        >
        </el-collapse-item>
      </el-collapse>
      <!-- 订单轨迹 -->
      <el-collapse v-model="activeNames">
        <el-collapse-item
          title="订单轨迹"
          name="3"
        >
          <!--百度地图-->
          <template>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-card
                  shadow="never"
                  class="mapBox1"
                >
                  <baidu-map
                    :center="center"
                    :zoom="zoom"
                    class="map"
                    @ready="handler"
                  >
                  </baidu-map>
                </el-card>
              </el-col>
            </el-row>
          </template>
        </el-collapse-item>
      </el-collapse>
      <!-- 取件信息 -->
      <el-collapse
        v-model="activeNames"
        class="pickup"
      >
        <el-collapse-item
          title="取件信息"
          name="4"
        >
          <el-row
            :gutter="24"
            justify="center"
          >
            <el-col
              :span="6"
            >
              <div class="szwd">
                所在网点:
                <label>{{ orderDetails.taskPickup }}</label>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type"
            >
              <div class="qjlx">
                取件类型：
                <label>{{ orderDetails.pickupType }}</label>
              </div>
            </el-col>
            <el-col
              :span="6"
            >
              <div class="zyzt">
                作业状态：
                <label>{{ orderDetails.zystatus }}</label>
              </div>
            </el-col>
            <el-col
              :span="5"
            >
              <div class="qjkdy">
                取件快递员：
                <label>{{ orderDetails.courierName }}</label>
              </div>
            </el-col>
          </el-row>
          <el-row
            :gutter="18"
            justify="center"
          >
            <el-col :span="6">
              <div class="kdydh">
                快递员电话：
                <label>{{ orderDetails.courierMobile }}</label>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-type-time"
            >
              <div class="yjqjrq">
                预计取件时间：
                <label>{{ orderDetails.estimatedStartTime }}</label>
              </div>
            </el-col>
            <el-col
              :span="6"
              class="pickup-completed-time"
            >
              <div class="qjwcsj">
                取件完成时间：
                <label>{{ orderDetails.actualEndTime }}</label>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <!-- 费用信息 -->
      <el-collapse v-model="activeNames">
        <el-collapse-item
          title="费用信息"
          name="5"
        >
          <el-row
            :getter="24"
            justify="center"
          >
            <el-col
              :span="8"
            >
              <div
                class="yf"
              >
                运费：
                <span class="yfmoney">{{ orderDetails.amount }}</span> 元
              </div>
            </el-col>
            <el-col
              :span="8"
            >
              <div
                class="zffs"
              >
                支付方式：
                <span>{{ orderDetails.paymentMethod }}</span>
              </div>
            </el-col>
            <el-col
              :span="8"
            >
              <div
                class="yf"
              >
                付款状态：
                <span>{{ orderDetails.paymentStatus }}</span>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <!-- 货品信息 -->
      <el-collapse
        v-model="activeNames"
        class="customer-table-box"
      >
        <el-collapse-item
          title="货品信息"
          name="6"
        >
          <el-table
            :data="propTableData.col"
            show-summary
          >
            <el-card
              class="table-card-box"
              shadow="never"
            >
              <div>
                <el-table-column
                  fixed="left"
                  label="序号"
                  width="80px"
                  type="index"
                  :index="indexMethod"
                >
                </el-table-column>
                <el-table-column
                  label="商品名称"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                      <el-input
                        v-model="scope.row.name"
                        clearable
                        size="mini"
                        placeholder="请输入"
                      ></el-input>
                    </span>
                    <span v-else>{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="货品类型"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                      <el-select
                        v-model="scope.row.goodsType"
                        placeholder="请选择"
                        clearable
                        size="mini"
                      >
                        <el-option
                          v-for="item in hpOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item"
                        ></el-option>
                      </el-select>
                    </span>
                    <span v-if="!scope.row.isSet && scope.row.goodsType">
                      <span>{{ scope.row.goodsType.name }}</span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="重量(千克)"
                  prop="totalWeight"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                      <el-input
                        v-model="scope.row.totalWeight"
                        clearable
                        size="mini"
                        placeholder="请输入"
                      ></el-input>
                    </span>
                    <span v-else>{{ scope.row.totalWeight }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="体积(立方)"
                  prop="totalVolume"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.isSet">
                      <el-input
                        v-model="scope.row.totalVolume"
                        clearable
                        size="mini"
                        placeholder="请输入"
                      ></el-input>
                    </span>
                    <span v-else>{{ scope.row.totalVolume }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  align="center"
                  label="操作"
                >
                  <template slot-scope="scope">
                    <el-link
                      v-if="!scope.row.isSet"
                      :underline="false"
                      size="mini"
                      type="primary"
                      round
                      plain
                      @click="valChange(scope.row, scope.$index, true)"
                    >编辑</el-link>
                    <el-link
                      v-else
                      :underline="false"
                      size="mini"
                      type="primary"
                      round
                      plain
                      @click="valChange(scope.row, scope.$index, true)"
                    >
                      保存
                    </el-link>
                    <el-link
                      v-if="!scope.row.isSet"
                      :underline="false"
                      size="mini"
                      type="danger"
                      round
                      plain
                      @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-link>
                    <el-link
                      v-else
                      :underline="false"
                      size="mini"
                      type="danger"
                      round
                      plain
                      @click="valChange(scope.row, scope.$index, false)"
                    >
                      取消
                    </el-link>
                  </template>
                </el-table-column>
              </div>
              <el-table-column></el-table-column>
            </el-card>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { orderDetail } from '@/api/order'
import { carGoList, carGoDel, carGoEdit } from '@/api/cargo'
import { goodsTypeCommonList } from '@/api/common'

export default {
  data() {
    return {
      // 订单详情
      orderDetails: {
        orderId: '', // 订单编号
        transportOrderId: '', // 运单编号
        createTime: '', // 下单时间
        status: '', // 订单状态
        mark: '', // 备注
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderAddress: '', // 发件人地址
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverAddress: '', // 收件人地址
        paymentMethod: '', // 付款方式
        paymentStatus: '', // 付款状态
        goodsTypeId: '', // 货物类型信息id
        goodsTypeName: '', // 货物类型名称
        receiverProvince: '', // 收件人省
        receiverCity: '', // 收件人城市
        receiverCounty: '', // 收件人区县
        senderProvince: '', // 发件人省
        senderCity: '', // 发件人省
        senderCounty: '', // 发件人区县
        distance: '', // 距离
        amount: '', // 订单金额
        agencyName: '', // 所在网点
        courierName: '', // 快递员名称
        courierMobile: '', // 快递员手机号
        estimatedStartTime: '', // 预计开始时间
        actualEndTime: '', // 实际完成时间
        pickupType: '', // 取件类型
        zystatus: '', // 作业状态
        estimatedArrivalTime: '', // 预计到达日期
        taskPickup: '', // 派送网点
        goodsType: {
          id: ''
        }
      },
      formData: {
        page: 1,
        pageSize: 10
      },
      requestParameters: {
        orderId: ''
      },
      propTableData: {
        sel: null, // 选中行
        col: []
      },
      hpOptions: [],
      center: {
        lng: 0,
        lat: 0
      },
      zoom: 3,
      activeNames: ['1', '2', '3', '4', '5', '6']
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.pickupType = this.$route.query.status
    this.getList(this.orderId)
    this.getCarGoList(this.orderId)
  },
  methods: {
    async getList() {
      const { data: res } = await orderDetail(this.orderId)
      // console.log(res)
      this.orderDetails.orderId = res.id
      this.orderDetails.transportOrderId = res.transportOrder.id
      this.senderAreaName = res.senderCity.name
      this.receiverAreaName = res.receiverCity.name
      this.logisticsInfo =
        res.transportOrderPointVOS == null
          ? []
          : res.transportOrderPointVOS.reverse()
      this.orderDetails.createTime = res.createTime
      this.orderDetails.estimatedArrivalTime = res.estimatedArrivalTime
      this.orderDetails.status = res.status
      this.orderDetails.distance = res.distance
      // 发件人
      this.orderDetails.senderName = res.senderName
      this.orderDetails.senderPhone = res.senderPhone
      this.orderDetails.senderAddress = res.senderAddress
      // 发件人省市区
      this.orderDetails.senderProvince = res.senderProvince.name
      this.orderDetails.senderCity = res.senderCity.name
      this.orderDetails.senderCounty = res.senderCounty.name
      // 收件人
      this.orderDetails.receiverName = res.receiverName
      this.orderDetails.receiverPhone = res.receiverPhone
      this.orderDetails.receiverAddress = res.receiverAddress
      // 收件人省市区
      this.orderDetails.receiverProvince = res.receiverProvince.name
      this.orderDetails.receiverCity = res.receiverCity.name
      this.orderDetails.receiverCounty = res.receiverCounty.name

      this.orderDetails.paymentMethod = res.paymentMethod
      this.orderDetails.paymentStatus = res.paymentStatus
      this.orderDetails.mark = res.mark
      if (res.paymentMethod === 1) {
        this.orderDetails.paymentMethod = '预结'
      } else {
        this.orderDetails.paymentMethod = '到付'
      }
      if (res.paymentStatus === 1) {
        this.orderDetails.paymentStatus = '未付'
      } else {
        this.orderDetails.paymentStatus = '已付'
      }
      // 取件信息
      this.orderDetails.taskPickup = res.taskPickup.agency.name
      this.orderDetails.courierName = res.taskPickup.courier.name
      this.orderDetails.courierMobile = res.taskPickup.courier.mobile
      this.orderDetails.estimatedStartTime = res.taskPickup.estimatedStartTime
      this.orderDetails.actualEndTime = res.taskPickup.actualEndTime
      this.orderDetails.amount = res.amount
      if (res.pickupType === 1) {
        this.orderDetails.pickupType = '网点自寄'
      } else {
        this.orderDetails.pickupType = '上门取件'
      }
      if (res.taskPickup != null) {
        if (res.taskPickup.status === 1) {
          this.orderDetails.zystatus = '新任务'
        } else if (res.taskPickup.status === 2) {
          this.orderDetails.zystatus = '已完成'
        } else if (res.taskPickup.status === 3) {
          this.orderDetails.zystatus = '已取消'
        }
      }
    },
    // 根据订单id获取货品类型
    async getCarGoList (orderId) {
      this.requestParameters.orderId = orderId
      const { data } = await carGoList(this.requestParameters)
      this.propTableData.col = data
      console.log(data)
    },
    // 序号自增
    indexMethod(index) {
      const currpage = this.formData.page // 当前页码，具体看组件取值
      const limitpage = this.formData.pageSize // 每页条数，具体是组件取值
      return index + 1 + (currpage - 1) * limitpage
    },
    // 百度地图
    handler ({
      BMap,
      map
    }) {
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      this.pt = new BMap.Point(116.4, 39.89)
      // 中心点
      this.center.lng = 116.4
      this.center.lat = 39.89
      this.zoom = 5.6
    },
    // 编辑货品
    async valChange (row, index, qx) {
      this.goodsItemId = row.id
      // 点击修改，判断是否已经保存所有操作
      for (const i of this.propTableData.col) {
        // eslint-disable-next-line eqeqeq
        if (i.isSet && i.id != row.id) {
          this.Message('请先保存数据!', 'warning')
          return false
        }
      }
      // 是否是取消操作
      if (!qx) {
        if (!this.propTableData.sel.id) {
          this.propTableData.col.splice(index, 1)
        }
        // 重新回到编辑之前的数据状态
        this.getCarGoList(this.orderId)
        return (row.isSet = !row.isSet)
      }
      // 保存货品
      if (row.isSet) {
        const v = this.propTableData.sel
        v.order = {
          id: this.orderId
        }
        if (v.name === '') {
          this.Message('货品名称不能为空!', 'warning')
        } else {
          const {
            cargoBarcode,
            quantity,
            remark,
            name,
            totalVolume,
            totalWeight,
            goodsType,
            order
          } = this.propTableData.sel
          const params = {
            cargoBarcode,
            quantity,
            name,
            totalVolume,
            remark,
            totalWeight,
            goodsTypeId: goodsType.id,
            orderId: order.id
          }
          await (this.goodsItemId ? carGoEdit(params, this.goodsItemId) : ''
          ).then(() => {
            this.goodsItemId = ''
          })
          row.isSet = false
          this.getCarGoList(this.orderId)
        }
      } else {
        this.$set(row, 'isSet', true)
        this.propTableData.sel = row
        const { data } = await goodsTypeCommonList()
        this.hpOptions = data.filter((obj) => obj.status === 1)
      }
    },
    // 删除货品
    async handleDelete (index, row) {
      this.$confirm('确定要删除货品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          this.change(row.id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 改变时触发的变化
    async change (id) {
      await carGoDel(id).then(() => {
        // 获取货品类型
        this.getCarGoList(this.orderId)
      })
    },
    // 提示框
    Message (msg, type) {
      this.$message({ type: type || 'info', message: msg })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import './index.scss';
.table-card-box{
  margin-top: 10px;
  margin-bottom: 10px;
}
.yfmoney{
  font-size: 18px;
    color: #ffb302;
}

</style>

